<template>
    <div class="app-container">
    <el-table v-loading="loading" :data="list" border style="width: 100%">
      <el-table-column prop="id" label="货道ID" min-width="100" />
      <el-table-column label="货道状态" min-width="100">
        <template slot-scope="scope">
          <div :class="scope.row.status == 1 ? 'success' : scope.row.status == 2 ? 'warning' : 'stop'">{{ scope.row.status == 1 ? "正常" : scope.row.status == 2 ? "异常" : "停用" }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="msg" label="异常状态说明" min-width="100" />
      <el-table-column prop="stock" label="货道库存" min-width="100" />
    <el-table-column label="商品信息" min-width="400">
        <template slot-scope="scope">
          <div style="display: flex; align-items: center">
            <img
              style="width: 50px; margin-right: 10px"
              :src="scope.row.goods && scope.row.goods.imgUrl"
              alt=""
            />{{ scope.row.goods && scope.row.goods.description}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="goods.name" label="商品名称" min-width="100"></el-table-column>
      <el-table-column prop="goods.price" label="商品价格（元）" min-width="300" />
      <el-table-column
        label="操作"
        fixed="right"
        min-width="150"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="editChannel(scope.row)"
            v-if="scope.row.id"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { goodsDetail, saveProducts, updateGoods, goodsPage, channelConfigs } from "@/api/user";
import { deepClone } from '@/utils'
export default {
  data() {
    return {
      marchineId: '',
      form: {
        name: "",
        amount: "",
        limitDay: "",
        status: 0,
        price: "",
        goods: [],
        remark: "",
        date: []
      },
      rules: {
        name: [
          { required: true, message: "请输入优惠券名称", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" },
        ],
        amount: [{ required: true, message: "请输入优惠券可使用次数", trigger: "blur" }],
        limitDay: [{ required: true, message: "请输入兑换券每日限制次数", trigger: "blur" }],
        status: [
          { required: true, message: "请选择上下架状态", trigger: "change" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        goods: [{ required: true, message: "请选择商品", trigger: "change" }],
        remark: [{ required: true, message: "请输入优惠券说明", trigger: "blur" }],
        date: [{ required: true, message: "请选择生效时间", trigger: "blur" }],
        
      },
      options: [],
      list: [],
      loading: false
    };
  },
  created() {
    const { query } = this.$route;
    if (query.marchineId) {
      this.marchineId = query.marchineId;
      this.marchineDetail(query.marchineId);
    }
  },
  methods: {
    getList() {
      goodsPage({}).then((res) => {
        this.options = res.data && res.data.map(item => {
          return {
            label: item.name,
            value: item.goodsId
          }
        });
      });
    },
    marchineDetail(marchineId) {
      this.loading = true;
      channelConfigs(marchineId).then((res) => {
        this.list = res.data;
        this.loading = false;
      });
    },
    editChannel (row) {
      this.$router.push({
        path: "/property/editChannel",
        query: {
          id: row.id,
          goodsId: row.goods ? row.goods.id : '',
          status: row.status,
          stock: row.stock,
          msg: row.msg,
          marchineId: this.marchineId
        }
      })
    }
  },
};
</script>
<style scoped>
.el-form {
  width: 60%;
}
.success {
	color: #67C23A;
}
.warning {
	color: #E6A23C;
}
.stop {
  color: #666;
}
</style>
